import "./style.css"
import {listProviders} from "./providers.ts"

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <div id="providerButtons"></div>
  </div>
`

listProviders(document.querySelector<HTMLDivElement>("#providerButtons")!)

// document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
//   <div>
//     <button id="getCollectionsButton">Список коллекций</button>
//     <ul id="collectionList"></ul>
//   </div>
// `
//
const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        'x-api-key': import.meta.env.VITE_OPENSEA_KEY
    },
};
//
// document.body.onload = () => {
//     const getCollectionsButton = document.getElementById('getCollectionsButton') as HTMLButtonElement;
//
//     getCollectionsButton.onclick = () => {
//         showLoader();
//
//         fetch('https://api.opensea.io/api/v2/collections?order_by=market_cap', options)
//             .then(response => response.json())
//             .then(response => {
//                 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<ul id="collectionList"></ul>`
//
//                 const collectionListEl = document.getElementById('collectionList') as HTMLUListElement;
//
//                 response.collections.forEach(collection => {
//                     const newCollection = document.createElement('li')
//                     newCollection.className = 'collection-item'
//                     newCollection.innerHTML = `
//                         <button>
//                             <img src="${collection.image_url}" alt="${collection.name}" />
//                             <div>${collection.name}</div>
//                         </button>
//                     `
//                     collectionListEl.appendChild(newCollection);
//                     newCollection.querySelector('button').onclick = () => {
//                         showLoader()
//                         fetch(`https://api.opensea.io/api/v2/collection/${collection.collection}/nfts`, options)
//                             .then(response => response.json())
//                             .then(response => {
//                                 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<ul id="collectionList"></ul>`
//                                 const collectionListEl = document.getElementById('collectionList') as HTMLUListElement;
//                                 response.nfts.forEach(nft => {
//                                     const newCollection = document.createElement('li')
//                                     newCollection.className = 'collection-item'
//                                     newCollection.innerHTML = `
//                                         <button>
//                                             <img src="${nft.image_url}" alt="${collection.name}" />
//                                             <div>${nft.contract}</div>
//                                         </button>
//                                     `
//
//                                     collectionListEl.appendChild(newCollection);
//                                 })
//                             })
//                             .catch(err => console.error(err));
//                     }
//                 })
//
//             })
//             .catch(err => console.error(err));
//     }
// }
//
export function showLoader() {
    document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
            <div class="loader">
                <div></div>
                <div></div>
                <div></div>
            </div>
        `
}

export function hideLoader() {
    document.querySelector<HTMLDivElement>('#app')!.innerHTML = ''
}

(function () {
    const getNFTButton = document.getElementById("get-user-nft");
    const confirmBtn = document.getElementById("confirmBtn");
    const favDialog = document.getElementById("favDialog");
    const inputEl = favDialog.querySelector("input");

    // Update button opens a modal dialog
    getNFTButton.addEventListener("click", function () {
        favDialog.showModal();
    });


    confirmBtn.addEventListener("click", async (event) => {
        event.preventDefault(); // We don't want to submit this fake form

        showLoader();

        const response = await fetch(`https://testnets-api.opensea.io/api/v2/chain/sepolia/account/${inputEl.value}/nfts`, options)
        const data = await response.json();

        hideLoader();

        const gridTable = document.querySelector<HTMLDivElement>('#grid-2');
        data.nfts.forEach(nft => {
            gridTable.insertAdjacentHTML('beforeend', `
                <div>
                    <img src="${nft.image_url}" alt="${nft.name}" />
                    <div>${nft.name}</div>
                    <div>${nft.contract}</div>
                </div>
            `)
        })

        favDialog.close(inputEl.value); // Have to send the select box value here.
    });
})();